<template>
  <view class="game-list-container">
    
    <!-- 游戏统计 -->
    <view class="game-stats">
      <view class="stat-item">
        <text class="stat-number">{{ availableGames.length }}</text>
        <text class="stat-label">可用游戏</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ totalGamesPlayed }}</text>
        <text class="stat-label">游戏次数</text>
      </view>
    </view>
    
    
    <!-- 游戏分类 -->
    <view class="categories-section">
      <view class="section-title">
        <text class="title-text">📂 游戏分类</text>
      </view>
      
      <scroll-view class="categories-scroll" scroll-x="true" show-scrollbar="false">
        <view class="categories-list">
          <view 
            v-for="category in gameCategories" 
            :key="category.id"
            class="category-card"
            @click="filterByCategory(category.id)"
          >
            <text class="category-icon">{{ category.icon }}</text>
            <text class="category-name">{{ category.name }}</text>
            <text class="category-count">{{ category.count }} 个游戏</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 游戏列表 -->
    <view class="games-section">
      <view class="section-title">
        <text class="title-text">🎯 推荐游戏</text>
      </view>
      
      <view class="games-grid">
        <view 
          v-for="game in availableGames" 
          :key="game.id"
          class="game-card"
          :class="{ 'disabled': !game.available }"
          @click="selectGame(game)"
        >
          <view class="game-image">
            <text class="game-emoji">{{ game.icon }}</text>
            <view v-if="game.isNew" class="new-badge">NEW</view>
            <view v-if="game.isHot" class="hot-badge">HOT</view>
          </view>
          
          <view class="game-info">
            <text class="game-name">{{ game.name }}</text>
            <text class="game-desc">{{ game.description }}</text>
            <view class="game-meta">
              <text class="game-category">{{ game.category }}</text>
              <text class="game-difficulty">{{ getDifficultyText(game.difficulty) }}</text>
            </view>
          </view>
          
          <view class="game-action">
            <button 
              class="play-btn" 
              :class="{ 'disabled': !game.available }"
              @click.stop="selectGame(game)"
            >
              {{ game.available ? '开始游戏' : '即将推出' }}
            </button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 最近游戏 -->
    <view class="recent-section" v-if="recentGames.length > 0">
      <view class="section-title">
        <text class="title-text">🕒 最近游戏</text>
      </view>
      
      <view class="recent-games">
        <view 
          v-for="game in recentGames" 
          :key="game.id"
          class="recent-game-item"
          @click="selectGame(game)"
        >
          <text class="recent-icon">{{ game.icon }}</text>
          <view class="recent-info">
            <text class="recent-name">{{ game.name }}</text>
            <text class="recent-time">{{ formatTime(game.lastPlayTime) }}</text>
          </view>
          <text class="recent-arrow">></text>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      availableGames: [
        {
          id: 'survival',
          name: '荒岛求生',
          description: '在荒岛上努力生存，收集资源，建造基地',
          icon: '🏝️',
          category: '生存',
          difficulty: 'medium',
          available: true,
          isNew: false,
          isHot: true,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'text_survival',
          name: '文字探险生存',
          description: '纯文字交互，做出抉择，活下去',
          icon: '📜',
          category: '生存',
          difficulty: 'easy',
          available: true,
          isNew: true,
          isHot: false,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'trust_fall',
          name: '信任博弈',
          description: '心理博弈游戏，考验你的投资策略',
          icon: '🤝',
          category: '策略',
          difficulty: 'medium',
          available: true,
          isNew: true,
          isHot: true,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'mayor_log',
          name: '镇长日志',
          description: '管理你的小镇，发展经济，招募村民',
          icon: '🏘️',
          category: '策略',
          difficulty: 'medium',
          available: true,
          isNew: true,
          isHot: true,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'puzzle',
          name: '益智拼图',
          description: '挑战你的逻辑思维，完成各种拼图挑战',
          icon: '🧩',
          category: '益智',
          difficulty: 'easy',
          available: false,
          isNew: true,
          isHot: false,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'racing',
          name: '极速赛车',
          description: '体验刺激的赛车竞速，挑战极限速度',
          icon: '🏎️',
          category: '竞速',
          difficulty: 'hard',
          available: false,
          isNew: false,
          isHot: false,
          playCount: 0,
          lastPlayTime: null
        },
        {
          id: 'strategy',
          name: '策略战争',
          description: '运筹帷幄，指挥千军万马征服世界',
          icon: '⚔️',
          category: '策略',
          difficulty: 'hard',
          available: false,
          isNew: false,
          isHot: false,
          playCount: 0,
          lastPlayTime: null
        }
      ],
      gameCategories: [
        { id: 'all', name: '全部', icon: '🎮', count: 6 },
        { id: 'survival', name: '生存', icon: '🏝️', count: 2 },
        { id: 'strategy', name: '策略', icon: '⚔️', count: 2 },
        { id: 'puzzle', name: '益智', icon: '🧩', count: 1 },
        { id: 'racing', name: '竞速', icon: '🏎️', count: 1 }
      ],
      recentGames: [],
      totalGamesPlayed: 0
    }
  },
  
  onLoad() {
    this.loadGameData()
    this.loadRecentGames()
    this.calculateStats()
  },
  
  methods: {
    loadGameData() {
      try {
        // 加载生存游戏数据
        const survivalData = uni.getStorageSync('survivalGameData')
        if (survivalData) {
          const game = JSON.parse(survivalData)
          const survivalGame = this.availableGames.find(g => g.id === 'survival')
          if (survivalGame) {
            survivalGame.playCount = game.gameCount || 0
            survivalGame.lastPlayTime = game.lastPlayTime
          }
        }
        
      } catch (error) {
        console.error('加载游戏数据失败:', error)
      }
    },
    
    
    loadRecentGames() {
      // 从可用游戏中筛选最近玩过的游戏
      this.recentGames = this.availableGames
        .filter(game => game.lastPlayTime && game.available)
        .sort((a, b) => new Date(b.lastPlayTime) - new Date(a.lastPlayTime))
        .slice(0, 3)
    },
    
    calculateStats() {
      // 计算总游戏次数
      this.totalGamesPlayed = this.availableGames.reduce((total, game) => {
        return total + (game.playCount || 0)
      }, 0)
    },
    
    selectGame(game) {
      if (!game.available) {
        uni.showToast({
          title: '游戏即将推出，敬请期待！',
          icon: 'none'
        })
        return
      }
      
      if (game.id === 'survival') {
        uni.navigateTo({ url: '/pages/game/survival/survival' })
      } else if (game.id === 'text_survival') {
        uni.navigateTo({ url: '/pages/game/text-survival/text-survival' })
      } else if (game.id === 'trust_fall') {
        // 修改为跳转到信任博弈游戏大厅
        uni.navigateTo({ url: '/pages/game/trust-fall/index' })
      } else if (game.id === 'mayor_log') {
        uni.navigateTo({ url: '/pages/game/mayor-log/mayor-log' })
      } else {
        uni.showToast({ title: '游戏开发中，敬请期待！', icon: 'none' })
      }
    },
    
    filterByCategory(categoryId) {
      if (categoryId === 'all') {
        // 显示所有游戏
        return
      }
      
      // 这里可以实现分类筛选逻辑
      uni.showToast({
        title: `筛选 ${this.gameCategories.find(c => c.id === categoryId)?.name} 分类`,
        icon: 'none'
      })
    },
    
    getDifficultyText(difficulty) {
      const difficultyMap = {
        'easy': '简单',
        'medium': '中等',
        'hard': '困难'
      }
      return difficultyMap[difficulty] || '未知'
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '从未'
      
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`
      } else if (diff < 86400000) { // 1天内
        return `${Math.floor(diff / 3600000)}小时前`
      } else {
        return date.toLocaleDateString()
      }
    }
  }
}
</script>

<style scoped>
.game-list-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}


.game-stats {
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  backdrop-filter: blur(10rpx);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
}

.games-section, .categories-section, .recent-section {
  margin-bottom: 20rpx;
}

.section-title {
  margin-bottom: 16rpx;
}

.title-text {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 4rpx;
}

.title-desc {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
}

.games-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.game-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.game-card:active {
  transform: scale(0.98);
}

.game-card.disabled {
  opacity: 0.6;
}

.game-image {
  position: relative;
  text-align: center;
  margin-bottom: 12rpx;
}

.game-emoji {
  font-size: 60rpx;
  display: block;
}

.new-badge, .hot-badge {
  position: absolute;
  top: -10rpx;
  right: 20rpx;
  background: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: bold;
}

.hot-badge {
  background: #ff6b35;
}

.game-info {
  margin-bottom: 12rpx;
}

.game-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #2d3436;
  margin-bottom: 6rpx;
}

.game-desc {
  display: block;
  font-size: 22rpx;
  color: #636e72;
  line-height: 1.3;
  margin-bottom: 10rpx;
}

.game-meta {
  display: flex;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.game-category, .game-difficulty {
  background: #f8f9fa;
  color: #6c757d;
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

.game-stats {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #95a5a6;
}


.play-count, .last-play {
  display: block;
}

.game-action {
  text-align: center;
}

.play-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  min-width: 200rpx;
}

.play-btn.disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

.categories-scroll {
  width: 100%;
  white-space: nowrap;
}

.categories-list {
  display: flex;
  gap: 16rpx;
  padding: 8rpx 0;
}

.category-card {
  flex-shrink: 0;
  width: 160rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 20rpx 16rpx;
  text-align: center;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.category-card:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.category-icon {
  display: block;
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.category-name {
  display: block;
  font-size: 22rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 4rpx;
}

.category-count {
  display: block;
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.7);
}

.recent-games {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 20rpx;
  backdrop-filter: blur(10rpx);
}

.recent-game-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: background-color 0.3s ease;
}

.recent-game-item:active {
  background: rgba(255, 255, 255, 0.1);
}

.recent-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.recent-info {
  flex: 1;
}

.recent-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 4rpx;
}

.recent-time {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
}

.recent-arrow {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5);
}
</style>
